Template Items Pane

Description

Template items are used to add event handlers to HTML elements in the List layout. The are created and managed on the List Template Items Pane.

Discussion

Template Items are inserted into the HTML template for the List control to add event handlers (such as a click event) to HTML elements in the template. Items are also be used to control whether the List row should be selected when the user taps an element.

Template items are defined on the List's Items pane, which is shown in the List Builder when the Template Items checkbox is checked (located at the bottom of the builder.) The Items pane will also be displayed if the Quick Access... > Template Items menu option is clicked.

The Items pane was added in Alpha Anywhere 4.5.0 to replace the modal popup window used in previous versions of Alpha Anywhere to create Template Items. The

Quick Access... >

Template Items menu option is used to access the popup window in prior versions.

Adding Template Items

Items are inserted into HTML markup using the a5-item attribute.

For example:

<span a5-item="item1">Clicking here will fire an event</span>

When you define items, properties can be set for each item, such as JavaScript to execute when an event occurs. Properties also define whether or not an item causes the List row to be selected.

Items can have 'arguments' which are passed to the JavaScript event handler. For example, you might insert this markup into a template:

<span a5-item="item1:{data:Name}">Clicking here will fire an event</span>

When the event handler for 'item1' is triggered, it will be passed the value in {data:Name} as an item argument. The argument can be referenced in JavaScript using the ia object. For example:

var name = ia['Name'];
alert("The value of 'Name' was " + name);

In addition to item arguments, JavaScript in event handlers for an item can reference the following objects:

lObj: A pointer to the List object.
rowNumber: The zero-based row number of the row the item is in.
value: The value the List will return for the row.
data: A JavaScript object that contains the data for the current row. For example, to read the value of the 'City' field in the List: var city = data['City'];. Note that field names are case-sensitive.